<template>
    <div class="">
      <div class="home" style="height:100%">
        <div class="title_box" ref="title_box">
          <div class="real_time_box">
            <div class="title_chinese">实时更新</div>
            <div class="title_english">{{storeName}}</div>
          </div>
          <div class="progress_box" style="display: flex;justify-content: flex-end;align-items: flex-end;">
            <div class="order_progress">
              还有<span style="color:#DCA873">{{count?count:0}}</span>人排队中
            </div>
            <div style="font-size:38px;color:#666">日期 {{day}}</div>
          </div>
        </div>
        <div class="big_number_box" ref="big_number_box" style="height:100%">
          <div class="ready_box ready_box_right" style="min-height:100%">
            <div class="ready_box_text ready_box_text_bottom">
              <div class="left flex wid">
                <div class="ready_text ready_text_bottom flex-g-1 t_c" style="font-size: 32px;width: 33.33%">餐桌类型</div>
                <div class="ready_text ready_text_bottom flex-g-1 t_c" style="font-size: 32px;width: 33.33%">等待桌数</div>
                <div class="ready_text ready_text_bottom flex-g-1 t_c" style="font-size: 32px;width: 33.33%">预计等待</div>
              </div>
            </div>
            <div class="all_number">
              <div class="ready_box_text flex wid" v-for="(item,index) in status_1">
                <div class="flex-g-1 t_c fon_30" style="width: 33.33%">{{item.name}}<span class="color_9">（{{item.min}}-{{item.max}}人）</span></div>
                <div class="flex-g-1 t_c fon_30" style="width: 33.33%">{{item.totalNum}}<span class="color_9">桌</span></div>
                <div class="flex-g-1 t_c fon_30" style="width: 33.33%">{{item.minute}}<span class="color_9">分钟</span></div>
              </div>
            </div>
            <div class="blank_box" style="width: 100%;bottom: 0;left: 0;position: absolute;background: #f7f7f9;"></div>
          </div>
          <div class="ready_box ready_box_left" style="min-height:100%">
            <div class="ready_box_text_bottom">
              <div class="flex wid" style="margin-bottom: 46px;">
                <div class="ready_text ready_text_bottom flex-g-1 t_c" style="font-size: 32px;width: 50%">餐桌类型</div>
                <div class="ready_text ready_text_bottom flex-g-1 t_c" style="font-size: 32px;width: 50%">等待桌号</div>
              </div>
              <div class="all_number">
                <div class="ready_box_text flex wid" v-for="(item,index) in status_1">
                  <div class="flex-g-1 t_c fon_30" style="width: 50%">{{item.name}}<span class="color_9">（{{item.min}}-{{item.max}}人）</span></div>
                  <div class="flex-g-1 t_c fon_30 finish_num suf" style="width: 50%;font-size: 50px">{{item.code}}</div>
                </div>
              </div>
              <div class="blank_box2" style="width: 100%;bottom: 0;left: 0;position: absolute;background: #f7f7f9;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
    import {queuingScreen} from "@/api/plug";
    import "../../assets/css/app.css";
    import index from '../../api/index';

    export default {
        created() {
            if (this.$route.query.storeId) {
                this.storeId = this.$route.query.storeId
                this.fetchData()
            }
            this.upLoad2(this)
            setInterval(() => {
                this.fetchData()
            }, 3000)
        },
        data() {
            return {
              loading:false,
              key: '',
              status_1: [],
              status_2: [],
              count: '',
              arr: [],
              day:'',
              storeName:'',
              percentage: 0,
              show_text: false,
              show_percentage: false,
              percentage_color: '',
              big_number_box_top: 0,
              title_box_top: 0,
              num_box_height: 0,
                storeId:'',
            };
        },
        methods: {
            upLoad2(_that) {
            _that.lockReconnect = false;
            _that.ws = null;
            const publishUrl = 'wss://' + 'bkycms.com' + ':9875';
            var wsUrl = index.isDev ? publishUrl : 'wss://' + window.location.host + ':9875';
            createWebSocket(wsUrl);
            function createWebSocket(url) {
              try {
                if ('WebSocket' in window) {
                  _that.ws = new WebSocket(url);
                }
                initEventHandle();
              } catch (e) {
                reconnect(url);
              }
            }
            function initEventHandle() {
              _that.ws.onclose = function () {
                reconnect(wsUrl);
              };
              _that.ws.onerror = function () {
                reconnect(wsUrl);
              };
              _that.ws.onopen = function () {
                // heartCheck.reset().start();
                let actions = {type:'storeId',data:_that.storeId};
                _that.ws.send(JSON.stringify(actions));
              };
              _that.ws.onmessage = function (event) {
                // heartCheck.reset().start();
                // console.log('客户端接收服务端数据时触发:' + event.data);
                console.log('llws收到消息啦')
                if (event.data) {
                  var hdData = JSON.parse(event.data);
                  if (hdData.type=='3') {
                    // fetchData()
                    _that.storeName = hdData.storeName
                    document.title = '实时更新-'+hdData.storeName
                    _that.status_1= hdData.list
                    _that.status_2= hdData.list
                    _that.count = hdData.number
                    _that.day = hdData.day
                    let takeNo=[]
                    if(hdData.list.length){
                      hdData.list.forEach(row =>{
                        takeNo.push(row.code)
                      })
                      _that.arr = takeNo[0].split('')
                    }
                  }
                }
              };
            }
            window.onbeforeunload = function () {
              _that.ws.close();
            };
            async function fetchData() {
              const {data} = await queuingScreen({storeId:_that.storeId});
              _that.storeName = data.storeName
              document.title = '实时更新-'+data.storeName
              _that.status_1= data.list
              _that.status_2= data.list
              _that.count = data.number
              _that.day = data.day
              let takeNo=[]
              if(data.list.length){
                data.list.forEach(row =>{
                  takeNo.push(row.code)
                })
                _that.arr = takeNo[0].split('')
              }
            }
            function reconnect(url) {
              if (_that.lockReconnect) return;
              _that.lockReconnect = true;
              setTimeout(function () {
                createWebSocket(url);
                _that.lockReconnect = false;
              }, 2000);
            }
            //心跳检测
            var heartCheck = {
              timeout: 1000,
              timeoutObj: null,
              serverTimeoutObj: null,
              reset: function () {
                clearTimeout(this.timeoutObj);
                clearTimeout(this.serverTimeoutObj);
                return this;
              },
              start: function () {
                var self = this;
                this.timeoutObj = setTimeout(function () {
                  _that.ws.send('ping');
                  // console.log("ping!")
                  self.serverTimeoutObj = setTimeout(function () {
                    _that.ws.close();
                  }, self.timeout);
                }, this.timeout);
              }
            };
          },
          async fetchData() {
            const {data} = await queuingScreen({storeId:this.storeId});
            this.storeName = data.storeName
            document.title = '实时更新-'+data.storeName
            this.status_1= data.list
            this.status_2= data.list
            this.count = data.number
            this.day = data.day
            let takeNo=[]
            if(data.list.length){
              data.list.forEach(row =>{
                takeNo.push(row.code)
              })
              this.arr = takeNo[0].split('')
            }
          },
        },
      destroyed(){
        console.log('页面销毁')
        this.lockReconnect = true
        this.ws.close()
      },
    };
</script>
